<template>
	<view>
		<view class="nav">
			<uni-nav-bar @clickLeft="$tab.back()" :fixed="false" color="#fff" left-icon="left" backgroundColor="#FA554E"
				title="订单管理" statusBar="true" :border="false" />
			<view class="bg-FFF">
				<u-tabs :list="tabsList" :current="tabIndex" :scrollable="false" lineWidth="30" lineColor="#DF2E2C"
					:activeStyle="{
				            color: '#303133',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" @change="tabChange">
				</u-tabs>
			</view>
		</view>

		<view :style="{
			height:occupyHeiht + 'px'
		}">

		</view>

		<view class="px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view v-for="(item,index) in list" :key="index" class="bg-FFF round-12 px-16 py-24 mt-24">
					<view class="text-24 flex align-center justify-between">
						<view class="">
							订单编号：{{item.orderNo}}
						</view>
						<view class="text-FF7C01">
							{{orderstate(item.state)}}
						</view>
					</view>
					<u-divider></u-divider>
					<view class="">
						<view v-for="(i, j) in item.orderSpuList" :key="j" class="p-12" :style="{
							marginTop:index === 0 ? '0' : '20rpx'
						}">
							<!-- 判断如果是有规格的 -->
							<view class="flex items-center" v-if="i.skuInfo">
								<view class="image-200">
									<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.skuInfo.icons"
										mode="">
									</image>
								</view>

								<view class="ml-20 flex flex-col text-32 w-full">
									<text class="u-line-2">{{ i.spuInfo.name }}</text>
									<view class="flex items-center mt-20">
										<view class="text-gray  text-20" v-if="i.skuInfo.mallSkuSpecs.length > 0">
											{{i.skuInfo.mallSkuSpecs[0].specName}}:{{i.skuInfo.mallSkuSpecs[0].specValue}}
										</view>
										<view class="text-gray  text-20 ml-12" v-if="i.skuInfo.mallSkuSpecs.length > 1">
											{{i.skuInfo.mallSkuSpecs[1].specName}}:{{i.skuInfo.mallSkuSpecs[1].specValue}}
										</view>
									</view>
									<view class="flex justify-between mt-48 items-center w-full">
										<view class="text-E2382B">
											￥{{ i.skuInfo.price }}
										</view>
										<view>X {{ i.num }}</view>
									</view>
								</view>
							</view>
							<!-- 没规格的 -->
							<view class="flex items-center" v-else>
								<view class="image-200">
									<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.spuInfo.cover"
										mode="">
									</image>
								</view>

								<view class="ml-20 flex flex-col text-32 w-full">
									<text class="u-line-2">{{ i.spuInfo.name }}</text>
									<view class="flex justify-between mt-48 items-center w-full">
										<view class="text-E2382B">
											￥{{ i.spuInfo.price }}
										</view>
										<view>X {{ i.num }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="my-20" >
						<view class="flex items-center justify-between">
							<view class="">
								收货人
							</view>
							<view class="flex items-center">
								<view class="">
									{{item.mallAddress.name}}
								</view>
							</view>
						</view>
						<view class="flex items-center justify-between mt-12">
							<view class="">
								收货人电话
							</view>
							<view class="flex items-center">
								<view class="">
									{{item.mallAddress.mobile}}
								</view>
							</view>
						</view>
						<view class="flex items-center justify-between mt-12">
							<view class="">
								收货地址
							</view>
							<view class="flex items-center"@click="setClip(item)">
								<view class="">
									{{item.mallAddress.area}}{{item.mallAddress.detail}}
								</view>
								<u-icon name="file-text-fill" color="#DE3432"></u-icon>
							</view>
						</view>
					</view>
					<view class="flex align-center box_4 pb-20 flex-row-reverse">
						<view v-if="tabIndex != 0 && tabIndex != 1" @click="seelogistics(item.orderNo)"
							class="box_2 text-gray text-28 box_3 ml-32">
							查看物流
						</view>
						<view v-if="tabIndex == 2 && item.isType != 3" @click="getApp_modify(item)"
							class="box_2 text-gray text-28 box_3 ml-32">
							修改物流单号
						</view>
						<view v-if="tabIndex == 0" @click="onchange(item.createUserTemp.phonenumber)"
							class="box_2 text-gray text-28 box_3 ml-32">
							联系买家
						</view>
						<view v-if="tabIndex==1" @click="order_Edit(item.orderNo)"
							class="box_2 text-gray text-28 box_3 ml-32">
							确认发货
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<u-popup :show="sendOut_show" @close="sendOut_show=false,form={}" mode="center" :round="20">
			<view style="width: 600rpx;padding: 48rpx;">
				<u--input placeholder="请输入物流名称" border="surround" v-model="form.logisticsName"></u--input>
				<view style="width: 100%;height: 40rpx;"></view>
				<u--input placeholder="请输入快递单号" border="surround" v-model="form.logisticsNo"></u--input>
				<view style="width: 100%;height: 50rpx;"></view>
				<u-button :text="form.status ? '确认发货' : '确认修改' " @click="form.status? order_Edit(): getApp_modify()"
					style="background-color: #E2382B;color: #fff;border-radius: 20rpx;"></u-button>
			</view>
		</u-popup>


		<!-- 物流 -->
		<u-popup :show="isLogistics" @close="isLogistics = false,wlInfo = {}" mode="center" round="16"
			:closeable="true">
			<logistics :wlInfo="wlInfo"></logistics>
		</u-popup>
	</view>
</template>

<script>
	import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
	export default {
		components: {
			logistics
		},
		data() {
			return {
				tabsList: [{
						name: "待付款"
					},
					{
						name: "待发货"
					},
					{
						name: "待收货"
					},
					{
						name: "已完成"
					}
				],
				tabIndex: 0,
				occupyHeiht: 0,
				storeId: "",
				list: [],
				isLogistics: false, //物流
				wlInfo: null,
				form: {},
				sendOut_show: false,
				globalConfig: getApp().globalData.config,
			};
		},
		onLoad(e) {
			this.storeId = e.storeId
			this.refresh()
		},
		onReady() {
			let view = uni.createSelectorQuery().in(this).select(".nav");
			view.fields({
				size: true,
				scrollOffset: true
			}, data => {
				this.occupyHeiht = data.height
			}).exec();
		},
		methods: {
			setClip(item){
				let data = `收货人:${item.mallAddress.name};收货人电话:${item.mallAddress.mobile};收货地址${item.mallAddress.area + item.mallAddress.detail}`
				uni.setClipboardData({
					data,
					success: function () {
						console.log('success');
					}
				});
			},
			getdetail(id) {
				this.$tab.nav(`/pages/mine/order/orderDetail?id=${id}`)
			},
			order_Edit(id) {
				if (id && (!this.form.logisticsNo || !this.form.logisticsName)) {
					this.sendOut_show = true
					this.form.orderNo = id
					this.form.status = 1
					return false
				}

				if (!this.form.logisticsNo || !this.form.logisticsName) {
					uni.$u.toast(`${'请填写物流名称/单号'}`);
					return false
				}

				if (!uni.$u.test.enOrNum(this.form.logisticsNo)) {
					uni.$u.toast(`${'请填写单号只能输入数字或字母'}`);
					return false
				}

				this.$Api.store.mallOrderSend(this.form).then((res) => {
					uni.$u.toast(`${'发货成功'}`);
					this.form = {}
					this.sendOut_show = false
					this.refresh() //刷新列表
				})
			},
			orderstate(state) {
				let value = ''
				this.globalConfig.appConfig.orderStatusList.forEach(item => {
					if (state == item.status) {
						value = item.name
					}
				})
				return value
			},
			onchange(p) {
				if (p) {
					uni.makePhoneCall({
						phoneNumber: p
					});
				} else {
					uni.$u.toast('电话录入异常，请手动拨打')
				}

			},
			copy(data) {
				if (data) {
					uni.setClipboardData({
						data: data,
						success: () => {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						}
					})
				}
			},
			getApp_modify(item) {
				if (!this.form.logisticsNo || !this.form.logisticsName) {
					this.form.orderNo = item.orderNo
					this.form.logisticsNo = item.logisticsNo
					this.form.logisticsName = item.logisticsName
					this.sendOut_show = true
					return false
				}
				if (!this.form.logisticsNo || !this.form.logisticsName) {
					uni.$u.toast(`${'请填写物流名称/单号'}`);
					return false
				}
				if (!uni.$u.test.enOrNum(this.form.logisticsNo)) {
					uni.$u.toast(`${'请填写单号只能输入数字或字母'}`);
					return false
				}
				this.$Api.store.updatelogistics(this.form).then((res) => {
					uni.$u.toast(res.msg);
					this.form = {}
					this.sendOut_show = false
					this.refresh() //刷新列表
				})
			},
			async seelogistics(orderNo) {
				const res = await this.$Api.store.mallOrderLogistics({
					orderNo //订单号
				})
				console.log(res)
				let tem = res.data.data
				let obj = {}
				obj.logo = tem.expressCompanyLogo
				obj.post_name = tem.expressCompanyName
				obj.exp_phone = tem.number
				obj.post_no = res.data.taskNo
				obj.addr = tem.theLastMessage
				obj.list = tem.logisticsTraceDetails.map(i => {
					i.location = i.areaName
					i.context = i.desc
					i.timeArr = [
						uni.$u.timeFormat((new Date(i.time)).getTime(), 'yyyy-mm-dd'),
						uni.$u.timeFormat((new Date(i.time)).getTime(), 'hh:mm:ss')
					]
					return i
				})

				this.wlInfo = obj
				this.isLogistics = true
			},
			tabChange(e) {
				this.tabIndex = e.index
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.store.ordersList({
						pageNum: pullScroll.page,
						pageSize: 10,
						state: this.tabIndex,
					})

					this.list = this.list.concat(res.rows || []);

					if (res.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="scss">
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 100%;
	}

	.box_2 {
		padding: 16rpx 40rpx;
		border-radius: 8rpx;
		border: 2rpx solid #E6E6E6;
	}

	.box_3 {
		background: #E2382B;
		color: white;
	}
</style>